<template>
  <div>
    <div class="custom_card">
      <div  style="display: flex;justify-content: space-between; align-items: center;margin: 20px 20px 20px 0">
        <el-button class="first-plain-btn" size="medium" @click="addEnterprise">新增企业</el-button>
        <span style="font-size: 16px;color: #333333">电子合同剩余数目:{{totalContractCount}}份</span>
      </div>
      <el-table
        v-loading="loading"
        :data="basicList"
        stripe
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
        <template slot="empty">
          <el-empty :image-size="50" description="暂无企业认证信息"></el-empty>
        </template>
        <el-table-column
          align="center"
          prop="name"
          label="企业名称"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="contactsTypeStr"
          label="管理员类型"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="contacts"
          label="管理员姓名"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="phoneNumber"
          label="电话"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="localSeal"
          label="印章"
          min-width="180">
        </el-table-column>
        <el-table-column
          align="center"
          prop="signatureMethodStr"
          label="签章方式"
          min-width="180">
          <template v-slot="{row}">

            <span style="margin-right: 10px">{{ row.signatureMethodStr }}</span>
            <el-button  v-if="row.signatureMethod == 1&& row.authsignStatus==2" size="small" type="text"
                        @click="handleOperate(100,row)">授权签署
            </el-button>
            <el-button size="small" type="text"
                       @click="handleOperate(6,row)">修改
            </el-button>


          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="associationStoreNames"
          label="关联门店"
          min-width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="认证结果"
          min-width="180">
          <template v-slot="{ row }">
            <el-button v-if="row.authenticationStatus!=1 && row.authenticationUrl && row.authenticationUrl!=''" size="small" type="text"
                       @click="handleOperate(99,row)">查看认证结果
            </el-button>
            <template v-else>
              --
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" fixed="left">
          <template v-slot="{ row }">
            <el-button size="small" type="text"
                       @click="handleOperate(1,row)">查看
            </el-button>
            <el-button size="small" type="text"
                       @click="handleOperate(2,row)">编辑
            </el-button>
            <el-button  size="small" type="text"
                       @click="handleOperate(3,row)">认证
            </el-button>
            <el-button size="small" type="text"
                       @click="handleOperate(4,row)">关联门店
            </el-button>
            <el-button size="small" type="text"
                       @click="handleOperate(5,row)">删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>

    <!--关联门店-->
    <el-dialog
      title="选择关联门店"
      :visible.sync="dialogVisible1"
      width="30%">
      <div>
        <el-form ref="form1" label-width="80px">
          <el-form-item label="选择门店:" prop="storeIdList">
            <el-select v-model="storeIdList" placeholder="请选择关联门店" style="width: 70%" multiple filterable>
              <el-option
                v-for="item in storeLists"
                :key="item.storeId"
                :label="item.storeName"
                :value="item.storeId">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="confimStore">确 定</el-button>
      </span>
    </el-dialog>


    <!--修改签章方式-->
    <el-dialog
      title="设置签章方式"
      :visible.sync="dialogVisible2"
      width="30%">
      <div>
        <el-form ref="form1" label-width="120px">
          <el-form-item >
            <template v-slot:label>
              <el-tooltip placement="right-end">
                <template v-slot:content>
                  自动签章:发起租车合同签约后,出租门店自动签署盖章,仅需客户签字。<br/><br/>
                  手动签章:发起租车合同签约后,先由出租门店签署合同,再发送至客户签字。<br/>
                </template>
                <el-button type="text" style="color: #333333;" icon="el-icon-question">签章方式:</el-button>
              </el-tooltip>
            </template>

            <el-radio-group v-model="currentSignatureMethod">
              <el-radio :label="1">自动签章</el-radio>
              <el-radio :label="2">手动签章</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="confimSignatureMethod">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import * as contractApi from "@/api/contract/enterpriseCertification";
import {association, getAllStrore, getElectronicContractCount, getEnterprises, signatureMethod} from "@/api/contract/enterpriseCertification";

export default {
  name:'EnterpriseCertification',
  components: {},
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      // 加载标识
      loading: false,
      // 总条数
      total: 0,
      // 工单数据
      basicList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      //用于回显
      storeIdList: [],
      //数据源
      storeLists: [],
      //当前企业id
      currentId: '',
      currentSignatureMethod: 2,
      totalContractCount:0
    }
  },
  mounted() {
    this.getList();
    this.getElectronicContractCount();
  },
  activated() {
    this.getList();
    this.getElectronicContractCount();
  },
  methods: {
    /*获取电子合同个数*/
    getElectronicContractCount(){
      contractApi.getElectronicContractCount().then(res=>{
        this.totalContractCount= res.data;
      })
    },
    // 刷新列表
    refreshList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 获取企业列表
    getList() {
      contractApi.list(this.queryParams).then(res => {
        this.total = res.total;
        this.basicList = res.rows;
      })
    },

    /*获取门店列表*/
    getStoreList() {
      let enterpriseCertificationIdIsNull = 0;
      if (this.currentId != '' || this.currentId != null) {
        enterpriseCertificationIdIsNull = 1;
      }
      contractApi.getAllStrore({
        enterpriseCertificationId:this.currentId,
         enterpriseCertificationIdIsNull: true,
      }).then(res => {
        this.storeLists = res.data || [];
      })
    },

    /*关联门店id*/
    confimStore() {
      contractApi.association({
        enterpriseCertificationId: this.currentId,
        storeIdList: this.storeIdList || []
      }).then(res => {
        this.dialogVisible1 = false;
        this.storeIdList = [];
        this.$message({
          type: 'success',
          message: '关联成功'
        });
        this.refreshList();
      })
    },

    /*修改签章方式*/
    confimSignatureMethod() {
      contractApi.signatureMethod({
        id: this.currentId,
        signatureMethod: this.currentSignatureMethod
      }).then(res => {
        this.dialogVisible2 = false;
        this.$message({
          type: 'success',
          message: '设置成功'
        });
        this.refreshList();
      })
    },

    /*新增企业*/
    addEnterprise() {
      this.$router.push({name: 'addEnterprise', query: {type: 0}})
    },

    //发起认证
    sendAuthentication(row) {
      this.$alert('确定发起认证吗?', '发起认证', {
        confirmButtonText: '确定',
        callback: action => {
          if (action == 'confirm') {
            contractApi.certification(row.id).then(res => {
              this.$message({
                type: 'success',
                message: '发起成功'
              });
              this.refreshList();
            })
          }
        }
      });
    },

    //删除
    deleteEnterpriseCertification(row) {
      this.$alert('确定删除该企业吗', '提示', {
        confirmButtonText: '确定',
        type: 'warning',
        callback: action => {
          if (action == 'confirm') {
            contractApi.deleteList(row.id).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.refreshList();
            })
          }
        }
      })
    },

    /*操作按钮点击事件*/
    handleOperate(type, row) {
      const companyInfo = row;
      this.currentId = row.id;
      switch (type) {
        case 1://查看
          this.$router.push({name: 'centerpriseCertificationDetail', query: {id: row.id}})
          break
        case 2://编辑
          this.$router.push({name: 'addEnterprise', query: {type: 1, id: row.id}})
          break
        case 3://认证
          this.sendAuthentication(row);
          break
        case 4://关联门店

          this.storeIdList = [];
          if(row.storeIdList && row.storeIdList.length>0){
            this.storeIdList = row.storeIdList;
          }
          this.$nextTick(()=>{
            this.getStoreList();
          })
          this.dialogVisible1 = true;
          break
        case 5://删除
          this.deleteEnterpriseCertification(row);
          break
        case 6://修改签章方式
          this.currentSignatureMethod = row.signatureMethod;
          this.dialogVisible2 = true;
          break
        case 99://查看认证结果
          window.open(row.authenticationUrl, '__blank');
          break
        case 100://授权认证
          window.open(row.authsignUrl, '__blank');
          break
        default:
          console.log('未知')
          break
      }
    }

  }
}
</script>

<style scoped lang="scss">

</style>
